import * as React from "react";
import { inject, observer } from "mobx-react";
import { Icon } from 'antd';
import { WrappedFormUtils } from 'antd/lib/form/Form';
import LoginForm from './form/LoginForm';
import RegisterForm from './form/RegisterForm';
import { LoginStore } from "../../store";
import { History } from 'history';

import './login.less';

const bg = require('../../assets/bg1.jpg')

interface IProps {
  history: History;
  loginStore: LoginStore;
  children?: AudioContextLatencyCategory;
  form: WrappedFormUtils;
}

@inject("loginStore")
@observer
class Login extends React.Component<IProps, {}> {
  render() {
    return (
      <div className='login' style={{ backgroundImage: "url(" + bg + ")" }}>
        <div className="login-header">
          <img src={require('../../assets/logo.png')} alt="hicap" />
        </div>
        <div className="login-content">
          <div className="mask" />
          {
            this.props.loginStore.isRegister
              ? <RegisterForm />
              : <LoginForm history={this.props.history} />
          }
        </div>
        <div className="login-footer">
          <span> © 2018 Hicap</span>
        </div>
      </div>
    );
  }
}

export default Login